<template>
	<view>
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<block slot="content">新增推荐</block>
		</cu-custom>
		
		<view :style="'height:'+screenHeight+'px;margin-bottom:'+(bottomHeight+10)+'px'">
			
			<navLongTab :tabTitle="tabs" @changeTab="changeTab"></navLongTab>
			
			<view class="cu-card case">
					<!-- 评价部分 begin -->
					<view class="cu-item shadow">						
						<view class="cu-form-group">
							<textarea  :style="'height: '+(tabNow==0?25:18)+'vh;'" maxlength="-1" @input="contentChange" 
								:placeholder="tabNow==0?stitle:gtitle">
							</textarea>
						</view>							
						<view class="cu-form-group">
							<view class="title">{{tabName}}名称</view>
							<input placeholder="填写名称更容易被收推荐哦~" v-model="recommend.name" name="input"></input>							
						</view>
						<view v-if="tabNow==1" class="cu-form-group">
							<view class="title">消费金额</view>
							<input placeholder="请填写大概消费金额" v-model="recommend.consume" name="input"></input>							
						</view>
						<view class="cu-bar bg-white solid-top">
							<view class="action">
								{{tabName}}照片(第1张照片是封面)
							</view>
							<view class="action">
								{{imgList.length}}/3
							</view>
						</view>
						<view class="cu-form-group padding-bottom">
							<cu-upload :max="3" :imgs="imgList" @imgChange="imgChange"></cu-upload>
						</view>
						<view class="cu-form-group" style="min-height: 60rpx;">
							<view class="text-sm text-grey">推荐审核通过后会在第一时间通知您!!</view>
						</view>
						<view class="cu-form-group" style="justify-content: center;">
							<button :class="'cu-btn '+(tabNow==0?'bg-blue':'bg-green')" @tap="submit">发布我的{{tabName}}推荐</button>
						</view>
					</view>			
			</view>
		
		</view>
		
	</view>
</template>

<script>
	import * as confirm from '@/common/confirm.js'
	import * as upload from '@/common/upload.js'
	
	import navLongTab from "@/components/tab/navLongTab.vue"
	
	export default {
		components: {
			navLongTab
		},
		data() {
			return {
				screenHeight:this.s_h_nob-10,
				bottomHeight:this.StatusBarBottom,
				/* 图片部分 begin */
				index: -1,
				imgList: [],
				img:'',
				stitle:'请您分享景点的介绍、设施、交通、联系方式等方面的信息，让大家感受它的特色~',
				gtitle:'请您分享特产的味道、价格、特点、购买方式等方面的信息，让大家感受它的特色~',
				/* 图片部分 end */
				recommend:{
					type:0,
					name:"",
					descr:"",
					consume:""
					
				},
				tabNow:0,
				tabName:'景点',
				tabs:[{name:'景点推荐'},{name:'特产推荐'}]
			}
		},
		methods: {
			changeTab(index){
				this.tabNow=index
				this.recommend.type=this.tabNow
				if(this.tabNow==0){
					this.tabName="景点"
				}else{
					this.tabName="特产"
				}
			},
			contentChange(val){
				this.recommend.descr=val.detail.value
			},
			imgChange(imgs){
				this.imgList=imgs
			},
			//图片上传管理
			async submit(){
				if(this.recommend.descr.length==0){
					confirm.warn("请您输入简介!!!")
					return;
				}
								
				let _this=this
				
				upload.uploadImgs('/user/recommend_upload',this.imgList,function(res){
					let urls=[]
					res.forEach((item)=>{
						urls.push(item.path)
					})
					
					_this.recommend.images=JSON.stringify(urls)
					
					uni.showLoading({
						title:'提交中'
					})
					_this.$api.post('/user/recommend_submit',_this.recommend).then(res => {					
						confirm.success(res.msg,()=>{
							uni.hideLoading()
							uni.navigateBack()
						})
					}).catch(error=>{
						uni.hideLoading()
						confirm.info(error.msg)
					})
					
				},{})				
			}
		}		
	}
</script>

<style>
</style>